<template>

    <div class="container">
        <!--<wl-lun></wl-lun>-->

        <div class="row">



                <div v-for="item in list" class="col-md-7 col-md-offset-2" style="padding:20px; border: 1px solid rgba(232,232,232,0.96);margin-bottom: 10px;
                    background-color: #FFFFFF">
                    <h5 v-if="item.user!=null" class="text-left"><router-link style="color:#0099CC" :to="{name:'userInfo', params: { id: item.user.id }}">{{item.user.username}}</router-link>
                    </h5>
                    <h3 class="text-left">
                        <router-link class="wl_title" target="_blank" style="color:#0099CC" :to="{name:'show', params: { id: item.id }}">{{changeTitle(item.title)}}</router-link>
                        <!--<a  v-bind:href="'/post/'+item.id">{{item.title}}</a>-->
                    </h3>
                <span v-html="$options.filters.img(item.content)" id="wl_img" class=""></span>
                    <p style="padding-top: 20px;" class="text-left wl_context"
                     v-html="$options.filters.context(item.content)">
               
                    </p>
                    <div class="text-left">
                    <span>赞</span><span>{{item.zan}}</span>
                    <span>评论</span><span>{{item.comment}}</span>
                    <span class="text-right">{{item.created_at | validate}}</span>
                    </div>

                    <!--<p style="background-color: red;height: 10px;"></p>-->

                </div>







        </div>


        <div class="" style="width:300px;margin :auto;border :0px solid red;">

        <p style="">当前第{{page}}页,共{{sizeCount}}页</p>
          
           <router-link class="wl_title"  style="color:#0099CC" :to="{name:'post_page', params: { page: parseInt(page)-1 }}">
              <el-button v-bind:class="page == 1 ? 'hidden' : '' " icon="el-icon-arrow-up" size="medium" class="ele_page_button" circle></el-button>
            </router-link>

            <router-link class="wl_title"  style="color:#0099CC" :to="{name:'post_page', params: { page: parseInt(page)+1 }}">
                <el-button v-bind:class="page >=sizeCount ? 'hidden' : '' " icon="el-icon-arrow-down" size="medium" class="ele_page_button" circle ></el-button>
            </router-link>

        </div>
        
            
            
            
        

    </div>
</template>

<style>

    .ele_page_button{
        width:60px;height:60px;font-size:25px;font-weight: bolder;
    }
    
    #wl_img img{
        width: 150px;
        height: 150px;
        

    }

      #wl_img{
        padding-left:0px; 

    }


    .wl_context{
        word-wrap:break-word; overflow:hidden;
    }
    .wl_title{
        word-wrap:break-word; overflow:hidden;
    }
</style>
<script>

    import conf from '../layout/conf.vue'//引用模块进来
    import Vue from 'vue'
    import WlLun from '../layout/lun.vue';
    
    export default {


        data(){
            return {
                list: {},
                page:1,
                sizeCount:1,
                // url:"http://www.wljava.com/post/web/index.php?r=post/post-show/index&page=",
                
                url:conf.url+"/index/post/index/",



            }


        },
        created(){
              var zhi=this.$config('u1rl');
            console.log(zhi);
        
       },
       watch:{
        '$route':'getData'
        },
 
        mounted() {
            
                this.getData();
                

        },


        methods:{
           
            getData(){
                var page=this.$route.params.page;
                 var url=this.url;
                 if(page!=null){
                     
                    url=this.url+"index="+page
                    this.page=page;
                    
                 }
       
                   this.axios.get(url).then(response=>{
                    
                    let data=response.data;
                    console.log(data);

                    this.sizeCount=data.sizecount;
                    // this.page=data.page;
                    this.list=data.posts;
                       let temp=this.list;

                       let val=temp[0]['content'];
                       
                });
            },
            wl_page(num){


                if(num=='-'){
                    num=parseInt(this.page)-1;
                }else if(num=='+'){
                    num=parseInt(this.page)+1;
                }

                this.axios.get(this.url+"index="+num).then(response=>{
                    
                    
                    let data=response.data;

                    console.log(response);
                    this.sizeCount=data.sizecount;
                       this.page=data.page;
                    this.list=data.posts;
                    


                })

            },

            changeTitle(val){

                if(val==null || val==""){
                            return  val;
                        }

                let title=val.substring(0,28);
        
                return title;
            },
        },
        components:{
            WlLun
        },




    }


//格式化时间的
    Vue.filter('validate', function(val) {
        var arrTimestamp = (val + '').split('');
        for (var start = 0; start < 13; start++) {
            if (!arrTimestamp[start]) {
                arrTimestamp[start] = '0';
            }
        }
        val = arrTimestamp.join('') * 1;

        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var now = new Date().getTime();
        var diffValue = now - val;

        // 如果本地时间反而小于变量时间
        if (diffValue < 0) {
            return '不久前';
        }

        // 计算差异时间的量级
        var monthC = diffValue / month;
        var weekC = diffValue / (7 * day);
        var dayC = diffValue / day;
        var hourC = diffValue / hour;
        var minC = diffValue / minute;

        // 数值补0方法
        var zero = function (value) {
            if (value < 10) {
                return '0' + value;
            }
            return value;
        };

        // 使用
        if (monthC > 12) {
            // 超过1年，直接显示年月日
            return (function () {
                var date = new Date(val);
                return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
            })();
        } else if (monthC >= 1) {
            return parseInt(monthC) + "月前";
        } else if (weekC >= 1) {
            return parseInt(weekC) + "周前";
        } else if (dayC >= 1) {
            return parseInt(dayC) + "天前";
        } else if (hourC >= 1) {
            return parseInt(hourC) + "小时前";
        } else if (minC >= 1) {
            return parseInt(minC) + "分钟前";
        }
        return '刚刚';

    });



    //格式化内容
    Vue.filter('context', function(val) {
                
                if(val==null || val==""){
                    return  val;
                }

                      let last="";
                        
                        for (var i = val.length - 1; i >= 0; i--) {
                            var zi=val[i];
                              var reg=/[\u4e00-\u9fa5]+/;
                              if(reg.test(zi)){
                               last+=zi;
                               
                              }
                               
                        }
            

                        return last;


    });


    //格式化内容
    Vue.filter('img', function(val) {
    
        if(val==null || val==""){
                    return  val;
                }

                        var zhi=val.indexOf("<img");
                        if(zhi!=-1){

                              var two=val.indexOf("/>",zhi);

                         let img=val.substring(zhi,two+2);

                            
                            return img;
                        }else{
                            return "";
                        }

                        
    });



//格式化标题
    Vue.filter('title', function(val) {
    
        if(val==null || val==""){
                    return  val;
                }

       let title=val.substring(0,28);


                        
                        return title;
    });

</script>
